<script setup lang="ts">
import {defineModel, inject, nextTick, onMounted, reactive, ref, useTemplateRef, watch} from 'vue'
import {customerView ,customerCartList} from "@/dt-lib/plug/api/admin/customerCenter";
import {formatDate, formatDateYmd} from "@/dt-lib/help/fun.ts";

import CustomerCom from "@/dt-lib/pages/home/customerCenter/customerComp/customer.vue";
import DepositCom from "@/dt-lib/pages/home/customerCenter/customerComp/deposit.vue";
import CartCom from "@/dt-lib/pages/home/customerCenter/customerComp/cart.vue";
import OrderCom from "@/dt-lib/pages/home/customerCenter/customerComp/order.vue";
import CardCom from "@/dt-lib/pages/home/customerCenter/customerComp/card.vue";
import FolowCom from "@/dt-lib/pages/home/customerCenter/customerComp/follow.vue";
import LogCom from "@/dt-lib/pages/home/customerCenter/customerComp/log.vue";

const drawer = defineModel("drawer", {type: Boolean, default: false})
const cusId = defineModel("cusId", {type: Number, default: 0})

interface CustomerInfoIF {
    "cus_name": string
    "cus_id": number
    "cus_sex": number|string
    "cus_img": string
    "cus_type": number
    "status": number
    "id_add_op": number
    "id_add_dept": number
    "name_add_op": string
    "name_add_dept": string
    "addtime": number
    "province": number|string
    "province_name": string
    "biz_id": number|string
    "biz_name": string
    "city": number|string
    "city_name": string
    "area": number|string
    "area_name": string
    "wechat_join_day": number
    "id_join_type": number
    "operator_user_id": number
    "operator_user_dept": number
    "inherit_id": number
    "is_kaikou": number
    "is_del_follow_user": number
    "kaikou_nums": number
    "first_shop": number
    "first_deposit": number
    "shop_name": number|string
    "bra_name": string
    "operator_user_name": string
    "operator_dept_name": string
    "last_shop": number
    "id_ascr_op": number
    "id_ascr_dept": number
    "name_ascr_op": string
    "name_ascr_dept": string
    "remarks": string
    "source_id": number|string
    "source_name": string
    "supplie_id": number|string
    "supplie_name": string
}

const customer = reactive({
  info: <CustomerInfoIF>{},
  deposit: [],
  cart: [],
  order: []
})

const columnDefault = 4
const dialogDefaultWidth = 850;
const drawerWidth = ref(dialogDefaultWidth);
const columnSize = ref(columnDefault);
const mini = ref(false);

// layout/index.vue 中有定义
const windowWidth = inject('windowWidth');
watch(windowWidth, (v) => {
  if (v < 850) {
    drawerWidth.value = '85%'
    mini.value = true;

    columnSize.value = 2

    if (v < 400) {
      columnSize.value = 1
    }

  } else {
    drawerWidth.value = dialogDefaultWidth
    columnSize.value = columnDefault
    mini.value = false
  }
}, {immediate: true})


const tabs = [
  {
    label: '基础',
    name: 'customer',
    component: CustomerCom,
  },
  {
    label: '定金',
    name: 'deposit',
    component: DepositCom,
  },
  {
    label: '预约',
    name: 'cart',
    component: CartCom,
  },
  {
    label: '订单',
    name: 'order',
    component: OrderCom,
  },
  {
    label: '卡项',
    name: 'card',
    component: CardCom,
  },
  {
    label: '跟进',
    name: 'follow',
    component: FolowCom
  },
  {
    label: '日志',
    name: 'log',
    component: LogCom,
  },

]

const activeName = ref('customer')
const activeTab = reactive({
  label: "基础",
  name: "customer",
})

const handleClick = (tab) => {
  // console.log(tab)
  activeTab.label = tab.props.label
  activeTab.name = tab.props.name
  // console.log(activeTab)

}

// const customerRef = ref(null);
// const depositRef = ref(null);
// const cartRef = ref(null);
// const orderRef = ref(null);
// const cardRef = ref(null);
// const followRef = ref(null);
// const logRef = ref(null);
//
// onMounted(() => {
//   customerRef.value = useTemplateRef('customerRef');
//   depositRef.value = useTemplateRef('depositRef');
//   const cartRef = useTemplateRef('cartRef');
//   const orderRef = useTemplateRef('orderRef');
//   const cardRef = useTemplateRef('cardRef');
//   const followRef = useTemplateRef('followRef');
//   const logRef = useTemplateRef('logRef');
// })



  const abcRef = useTemplateRef('abc');

  // const customerRef = useTemplateRef('customerRef');
  // const depositRef = useTemplateRef('depositRef');
  // const cartRef = useTemplateRef('cartRef');
  // const orderRef = useTemplateRef('orderRef');
  // const cardRef = useTemplateRef('cardRef');
  // const followRef = useTemplateRef('followRef');
  // const logRef = useTemplateRef('logRef');

watch(()=>activeTab.name, (newVal) => {

  console.log(abcRef.value)

  // switch (newVal) {
  //   case 'customer':
  //     customerRef.value?.init()
  //     break;
  //   case 'deposit':
  //     depositRef.value?.init()
  //     break;
  //   case 'cart':
  //     cartRef.value?.init()
  //     break;
  //   case 'order':
  //     orderRef.value?.init()
  //     break;
  //   case 'card':
  //     cardRef.value?.init()
  //     break;
  //   case 'follow':
  //     followRef.value?.init()
  //     break;
  //   case 'log':
  //     logRef.value?.init()
  //     break;
  // }

})

const success = (type:string,data: any) => {
  if(type==='customer'){
    customer.info = data
  }
}

// watch(()=>activeTab.name,()=>{
//
//     console.log(activeTab.name)
//     switch(activeTab.name){
//       case 'cart':
//         getCart()
//         break;
//     }
//
// })

onMounted(() => {
  // 在 DOM 更新后执行回调
  nextTick(() => {
    console.log('DOM 已更新');
    console.log(abcRef.value)
  });
});


watch(cusId,()=>{
  console.log(cusId.value)
  console.log(abcRef.value)
  // console.log(customerRef.value)
  // customerRef.value?.init()
})
//
//
// const getCus = () => {
//   customerView({cus_id: cusId.value})
//       .then(res => {
//         customer.info = res.data
//       })
// }

// const getCart = () => {
//
//   if(customer.deposit.length>0){return}
//   customerCartList({cus_id: cusId.value,needPage:true,limit:20,page:1})
//       .then(res => {
//         customer.deposit = res.data
//       })
// }

const tableData = [
  {
    date: '2016-05-03 18:00',
    name: '上海普陀财富店',
    state: 'California',
    city: '生效中',
    address: '-',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-02 15:30',
    name: '上海普陀财富店',
    state: 'California',
    city: '已开单',
    address: '30',
    zip: 'CA 90036',
    tag: 'Office',
  },
  {
    date: '2016-05-04 10:00',
    name: '上海普陀财富店',
    state: 'California',
    city: '已开单',
    address: '-',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '2016-05-01 16:30',
    name: '上海普陀财富店',
    state: 'California',
    city: '已开单',
    address: '90',
    zip: 'CA 90036',
    tag: 'Office',
  },
]



</script>

<template>
  <el-drawer
      v-model="drawer"
      :size="drawerWidth"
      :show-close="false"
      header-class="dt-drawer-header"
      body-class="dt-drawer-body"
  >
    <template #header="{ close }">
      <h4>

        <div class="customer"  v-if="!mini">
          <div class="customer-img">
            <el-avatar shape="square" size="large" alt="查看详情"
                       :src="customer.info.cus_img?customer.info.cus_img:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
          </div>
          <div class="customer-desc">
            <div class="user-name">
              {{ customer.info.cus_name }}
              <span v-if="!mini">
                  <el-tag :type="customer.info.cus_type==1?'danger':'info'" size="small">
                    {{ customer.info.cus_type == 1 ? '新客' : '老客' }}
                  </el-tag>
                  <el-tag :type="customer.info.cus_sex==2?'danger':(customer.info.cus_sex==1?'primary':'info')" size="small">
                    {{ customer.info.cus_sex == 2 ? '女' : (customer.info.cus_sex == 1 ? '男' : '未知') }}
                  </el-tag>
                  <el-tag :type="customer.info.kaikou_nums>0?'success':'info'"  size="small">
                    {{ customer.info.kaikou_nums>0?customer.info.kaikou_nums + '次开口':'不开口' }}
                  </el-tag>
                  <el-tag type="danger" size="small"
                          v-if="customer.info.is_del_follow_user && customer.info.is_del_follow_user>0">
                    客删
                  </el-tag>
                  <el-tag type="warning" size="small"
                          v-if="customer.info.inherit_id && customer.info.inherit_id>0">
                    重粉
                  </el-tag>
                  <el-tag type="danger" size="small"
                          v-if="customer.info.status && customer.info.status===99">
                    删除
                  </el-tag>
              </span>
            </div>
            <div class="user-id">
              {{ customer.info.cus_id }}
            </div>
          </div>
        </div>
        <div v-else>
          客户详情
        </div>
      </h4>
      <div>
        <el-button-group size="small">
          <el-button icon="Money">下定</el-button>
          <el-dropdown size="small" split-button class="no-border">
            <el-icon>
              <Calendar/>
            </el-icon>
            <span>预约</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <FormOutlined/>
                  <span class="dropdown-item-name">编辑</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <ProfileOutlined/>
                  <span class="dropdown-item-name">跟进</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <CoffeeOutlined/>
                  <span class="dropdown-item-name">客诉</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <ShoppingOutlined/>
                  <span class="dropdown-item-name">加卡</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <BlockOutlined/>
                  <span class="dropdown-item-name">转重粉</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <FrownOutlined/>
                  <span class="dropdown-item-name">黑名单</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <DeleteOutlined/>
                  <span class="dropdown-item-name">删除</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
        <el-divider direction="vertical" />
        <el-button size="small" icon="Close" circle @click="close"/>
      </div>

    </template>
    <div class="bg-pd15" style="margin-bottom: 10px" v-if="mini">
      <div class="customer-info" >
        <div class="customer">
          <div class="customer-img">
            <el-avatar shape="square" size="large" alt="查看详情"
                       :src="customer.info.cus_img?customer.info.cus_img:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"/>
          </div>
          <div class="customer-desc">
            <div class="user-name">
              {{ customer.info.cus_name }}
            </div>
            <div class="user-id">
              {{ customer.info.cus_id }}
            </div>
          </div>
        </div>

        <div class="user-tag">
          <el-tag :type="customer.info.cus_type==1?'danger':'info'" size="small">
            {{ customer.info.cus_type == 1 ? '新客' : '老客' }}
          </el-tag>
          <el-tag :type="customer.info.cus_sex==2?'danger':(customer.info.cus_sex==1?'primary':'info')" size="small">
            {{ customer.info.cus_sex == 2 ? '女' : (customer.info.cus_sex == 1 ? '男' : '未知') }}
          </el-tag>
          <el-tag :type="customer.info.kaikou_nums>0?'success':'info'"  size="small">
            {{ customer.info.kaikou_nums>0?customer.info.kaikou_nums + '次开口':'不开口' }}
          </el-tag>
          <el-tag type="danger" size="small" v-if="customer.info.is_del_follow_user && customer.info.is_del_follow_user>0">
            客删
          </el-tag>
          <el-tag type="warning" size="small"
                  v-if="customer.info.inherit_id && customer.info.inherit_id>0">
            重粉
          </el-tag>
          <el-tag type="danger" size="small"
                  v-if="customer.info.status && customer.info.status===99">
            删除
          </el-tag>
        </div>
      </div>
    </div>

    <div class="bg-pd15" style="padding-top: 5px">

      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane  v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
          <component ref="abc" :is="tab.component" :mini="mini" :cusId="cusId" :key="tab.name" @success="success" />
        </el-tab-pane>
      </el-tabs>

<!--      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--          <el-tab-pane label="基础" name="customer">-->
<!--            <CustomerCom ref="customerRef" :mini="mini" :cusId="cusId" @success="success" />-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="预约" name="cart">-->
<!--            <CartCom ref="cartRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="订单" name="order">-->
<!--            <OrderCom ref="orderRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="定金" name="depisit">-->
<!--            <DepositCom ref="depositRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="卡项" name="card">-->
<!--            <CardCom ref="cardRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="跟进" name="follow">-->
<!--            <FolowCom ref="followRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="日志" name="log">-->
<!--            <LogCom ref="logRef" :mini="mini" :cusId="cusId"/>-->
<!--          </el-tab-pane>-->
<!--      </el-tabs>-->

    </div>




  </el-drawer>
</template>

<style scoped lang="scss">
.no-border {
  ::v-deep(.el-button-group>.el-button:first-child) {
    border-radius: 0 !important;
  }
}


.customer-info {
  display: flex;
  flex-direction: column;
  .user-tag {
    display: flex;
    align-items: center;

    margin-top: 10px;
    padding:5px;
    background-color: rgb(247 ,247,247);
    border-radius: 5px;

    ::v-deep(.el-tag) {
      margin-right: 5px!important;
    }

  }
}


.customer {
  display: flex;
  height: 100%;
  align-items: center;


  .customer-img {
    padding-right: 10px;
    display: flex;
    align-items: center;
  }

  .customer-desc {
    flex: 1;

    .user-name {
      font-size: 14px;

      display: flex;
      align-items: center;

      ::v-deep(.el-tag) {
        margin-left: 5px;
      }
    }

    .user-id {
      font-size: 12px;
      color: var(--el-color-info);
    }

  }
}

.dropdown-item-name {
  padding-left: 6px;
}

</style>